<template>
  <div class="timeOutRuleSet">
    <div class="time-big">
      <div class="title">
        监控时段
      </div>
      <div class="content-item">
        <el-form :model="form" ref="form" :rules="rules" size="small" :inline="true">
          <div class="item-li" v-for="(item ,index) in form.times" :key="index">
            <el-form-item :label="`监控时段${index+1}`" :prop="`times[${index}].timeRange`">
              <el-time-picker
                is-range
                v-model="item.timeRange"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                @change="val=>getTime(val,index)"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
              <div class="tips">系统将在每天03:00:00至23:59:05监控员工回复行为</div>
            </el-form-item>
            <div class="right-btn">
              <i class="el-icon-remove-outline"></i>
            </div>

          </div>
          <el-button v-hasPermi="['system:timeoutreply:addtime']" type="primary" plain style="margin-left: 20px;" @click="getActive"><i class="el-icon-plus"></i>添加监控时段</el-button>
        </el-form>
      </div>
    </div>
    <div class="time-big">
      <div class="title">
        超时触发时间
      </div>
      <div class="content-item">
        <el-form :model="form" ref="form" :rules="rules" size="small" :inline="true">
          <div class="item-li">
            <el-form-item label-width="0px" prop="time">
              <div class="flex">超过
                <el-input placeholder="" size="small" style="width: 110px; margin: 0px 10px" v-model="form.time" clearable></el-input>
                分钟未回复消息，认定为超时回复
              </div>
              <div class="tips">私聊：超过2分钟未回复消息，群聊：客户在群内@监控对象，2分钟内未回复消息</div>
            </el-form-item>
          </div>

        </el-form>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">取 消</el-button>
      <el-button @click="onSubmit('form')">提交</el-button>
    </div>
  </div>
</template>

<script>
import item from "@/layout/components/Sidebar/Item.vue";

export default {
  data() {
    return {
      form: {
        time: 1,//超时时间
        times: [
          {
            timeRange: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],//时间范围
            startTimes: '',
            endTimes: '',
          }
        ],
      },
      // 表单校验
      rules: {
        time: [{required: true, message: "请输入时间", trigger: "blur"}],
        timeRange: [{required: true, message: "请选择时间", trigger: "blur",},],
      },
    };
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {

  },
  methods: {
    getTime(val,index){
      if(val && val.length>0){
        this.form.times[index].startTimes=val[0];
        this.form.times[index].endTimes=val[1];
      }

      console.log('val的变化：',val);
      console.log('index:',index);
    },
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },
    getActive() {
      let obj = {
        timeRange: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],//时间范围
        startTimes: '',
        endTimes: '',
      }
      this.form.times.push(obj);
    },
    onSubmit(formName) {
      //提交的代码
      this.form.times.forEach(item => {
        if (!item.timeRange || item.timeRange && item.timeRange.length == 0) {
          this.$message({
            message: '请选择时间段',
            type: 'warning'
          });
          return;
        }
      })
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.timeOutRuleSet {
  width: 1000px;
  margin: auto;
}

.title {
  height: 48px;
  padding-left: 12px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: rgba(0, 0, 0, .85);
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
}

.content-item {

}

.time-big {
  background: #fff;
  padding-bottom: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.item-li {
  position: relative;
  display: flex;
  background: #f7f7f7;
  padding: 20px;
  padding-bottom: 0px;
  border: 1px solid #e9e9e9;
  margin: 20px;
  position: relative;

  .right-btn {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    width: 50px;
    right: 0px;
    font-size: 24px;
    justify-content: center;
    top: 0px;
    border-left: 1px solid #eee;

    i {
      cursor: pointer;
    }
  }

  .tips {
    color: #888;
  }

}
</style>
